<div th:replace="~{ backend/app :: layout ('Create New Post', ~{::#css_content}, ~{::#main_content}, ~{::#js_content}) }" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
    <div class="content-wrapper" id="main_content">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12 d-flex justify-content-between">
                        <h1>Create New Post</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <form id="post-form" method="post" action="#" th:action="@{/backend/post/store}" enctype="multipart/form-data" th:object="${post}">
                                <div class="card-body">
                                    <input type="hidden" name="id" th:value="*{id}">
                                    <input type="hidden" name="user_id" th:value="${#authentication.principal.user.id}">

                                    <div class="form-group">
                                        <label for="title">标题</label>
                                        <input th:field="*{title}" type="text" class="form-control" th:class="|form-control ${#fields.hasErrors('title') ? 'is-invalid' : ''}|" name="title" id="title" placeholder="标题" required->
                                        <span th:if="${#fields.hasErrors('title')}" id="title-error" class="error invalid-feedback" th:errors="*{title}"></span>
                                    </div>
                                    <div class="form-group only-standard">
                                        <label for="content">内容</label>
                                        <div id="content" style="z-index: 1080">
                                            <textarea name="content" class="form-control" rows="6" required th:utext="*{content}"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="description">描述</label>
                                        <div id="description">
                                            <textarea th:field="*{description}" name="description" class="form-control" rows="2"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="status-select">状态</label>
                                        <select th:field="*{status}" class="form-control" id="status-select" name="status">
                                            <option value="1">发布</option>
                                            <option value="0">草稿</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="cover">封面图片</label>
                                        <div>
                                            <input type="file" name="coverFile" id="cover" class="d-block">
                                            <input th:field="*{cover}" type="hidden" name="cover">
                                            <img th:if="!${#strings.isEmpty(post.cover)}" th:src="*{cover}" class="img-fluid blog-post-cover mt-2" alt="blog-post-cover">
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>



    <link id="css_content" rel="stylesheet" href="/vendor/vditor/dist/index.css">

    <div id="js_content">
        <script src="/vendor/vditor/dist/index.min.js" defer></script>
        <script>
            $(function() {
                let vditor = new Vditor('content', {
                    mode: 'sv',
                    height: 500,
                    cdn: '/vendor/vditor',
                    preview: {
                        theme: {
                            path: '/vendor/vditor/dist/css/content-theme',
                        }
                    },
                    counter: {
                        enable: true,
                    },
                    cache: {
                        enable: false,
                    },
                })

                $("#post-form").submit(function() {
                    $(this).append(
                        $('<textarea />').attr("id", "content-textarea")
                            .attr("class", "d-none")
                            .attr('name', 'content')
                    );
                    $('#content-textarea').val(vditor.getValue());
                    return true;
                });
            });
        </script>
    </div>
</div>
